<template>
  <div style="height: 70vh">

    <el-container style="height: 100%;">

      <el-main class="ml30">
        <el-row class="mb10">
          <el-col :span="8"><span>奖金名称：{{ dataForm.jjMc }}</span></el-col>
          <el-col :span="8"><span>奖金编号：{{ dataForm.jjBh }}</span></el-col>
          <el-col :span="8"><span>奖金类型：{{ dataForm.jjLx == 1 ? "年度" : dataForm.jjLx == 2 ? "月度" : dataForm.jjLx == 3 ? "日常" : "暂无" }}</span></el-col>
        </el-row>
        <el-row class="mb10">
          <el-col :span="8"><span>奖金来源：{{ dataForm.fpLy == 1 ? "上级分配" : dataForm.fpLy == 2 ? "单位自筹" : "暂无" }}</span></el-col>
          <el-col :span="8"><span>专项奖金：{{ dataForm.sfZx }}</span></el-col>
        </el-row>
        <el-row class="mb10">
          <el-col :span="8"><span>开始时间：{{ $moment(dataForm.jjDateq).format("YYYY-MM-DD") }}</span></el-col>
          <el-col :span="8"><span>结束时间：{{ $moment(dataForm.jjDatez).format("YYYY-MM-DD") }}</span></el-col>
          <el-col :span="8"><span>过期时间：{{ $moment(dataForm.gqTime).format("YYYY-MM-DD hh:mm:ss") }}</span></el-col>
        </el-row>
        <el-row class="mb10">
          <el-col :span="8"><span>基础奖金：{{ dataForm.fpJj }}元</span></el-col>
          <el-col :span="8"><span>追加奖金：{{ dataForm.zjJj }}元</span></el-col>
          <el-col :span="8"><span>奖金总额：{{ dataForm.jjZe }}元</span></el-col>
        </el-row>
        <el-row class="mb10">
          <el-col :span="8"><span>部门分配：{{ dataForm.bmJj }}元</span></el-col>
          <el-col :span="8"><span>员工分配：{{ dataForm.ygJj }}元</span></el-col>
          <el-col :span="8"><span>定向分配：{{ dataForm.dxFp }}元</span></el-col>
        </el-row>
        <el-row class="mb10">
          <el-col :span="8"><span>分配总额：{{ dataForm.bmJj + dataForm.ygJj + dataForm.dxFp }}元</span></el-col>
          <el-col :span="8"><span>奖金余额：{{ dataForm.jjYe }}元</span></el-col>

        </el-row>
        <el-row class="mb10">
          <el-col :span="8"><span>审核状态：{{ dataForm.fpZt }}</span></el-col>
        </el-row>

         <el-row class="mb10">
          <el-col :span="8"><span>审核状态：{{ dataForm.fpZt }}</span></el-col>
        </el-row>
      </el-main>


      <el-header height="50%">
        <div id="fpEcharts" style="width: 33%;height:100%;float: left"></div>
        <div id="bmEcharts" style="width: 33%;height:100%;float: left"></div>
      </el-header>
    </el-container>

  </div>
</template>

<script>
import {getObj} from '@/api/jiangjin/jiangjinfpjjfpdjb'
import {getBmfpList} from '@/api/jiangjin/jiangjinfpjjbmfppzmxb'
import {grfppzmxbCount} from '@/api/jiangjin/jiangjinfpjjgrfppzmxb'
import * as echarts from 'echarts';


export default {
  components: {},
  data() {
    return {
      // 奖金组成
      dataForm: [],
      // 部门分配
      bmfpForm: [],
      // 资金类型（个人分配）
      grfpForm: []
    }
  },
  computed: {
    // 取得部门分配显示信息
    getBmFpListShow() {
      let sStr = [];
      this.bmfpForm.map(u => {
        if (u.jjJe > 0) {
          sStr.push({
            value: u.jjJe,
            name: u.deptName
          })
        }
      })
      return sStr;
    },
    // 取得个人显示信息
    getGrFpListShow() {
      let sStr = [];
      this.grfpForm.map(u => {
        sStr.push({
          value: u.jj_ze,
          name: u.jjx_mc
        })
      })
      return sStr;
    }
  },
  mounted() {
  },
  methods: {
    init(id) {
      this.$nextTick(() => {
        getObj(id).then(response => {
          this.dataForm = response.data.data;
          this.fpEcharts();
        })

        getBmfpList(id).then(res => {
          this.bmfpForm = res.data.data;
          this.bmEcharts();
        })


      })
    },
    //正确值处理
    getBlankValue(value) {
      let lResult = "";
      if (value === undefined || value === null) {
        lResult = 0;
      } else {
        lResult = value;
      }
      return lResult;
    }
    ,
    fpEcharts() {
      var chartDom = document.getElementById('fpEcharts');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '奖金使用情况',
          subtext: '奖金总额' + this.getBlankValue(this.dataForm.jjZe),
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.getBlankValue(this.dataForm.bmJj), name: '部门分配'},
              {value: this.getBlankValue(this.dataForm.ygJj), name: '员工分配'},
              {value: this.getBlankValue(this.dataForm.dxFp), name: '定项分配'},
              {value: this.getBlankValue(this.dataForm.jjYe), name: '奖金余额'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    bmEcharts() {
      var chartDom = document.getElementById('bmEcharts');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '奖金项组成',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: this.getBmFpListShow
            // data: [
            //   {value: 1048, name: '搜索引擎'},
            //   {value: 735, name: '直接访问'},
            //   {value: 580, name: '邮件营销'},
            //   {value: 484, name: '联盟广告'},
            //   {value: 300, name: '视频广告'}
            // ]
          }
        ]
      };

      option && myChart.setOption(option);
    },

  }
}
</script>
